import React from 'react';

import Map from './Map.jsx';
import NavLeft from './NavLeft.jsx';

import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../../constants/TodoFilters';

const TODO_FILTERS = {
  [SHOW_ALL]: () => true,
  [SHOW_ACTIVE]: todo => !todo.completed,
  [SHOW_COMPLETED]: todo => todo.completed
}

class BodyContent extends React.Component{
  static propTypes: {
    todos: PropTypes.array.isRequired,
    actions: PropTypes.object.isRequired
  }

  constructor(props) {
    super(props);

    this.state = {
      filter: SHOW_ALL,
      data: []
    }
  }

  subscribeClick() {

  }

  callMapFunc(data) {
    this.setState({data: data});
  }

  render() {
    let {todos, actions} = this.props;
    const { filter } = this.state;

    const filteredTodos = todos.filter(TODO_FILTERS[filter])
    const todo = filteredTodos[0];

    return (
      <div className="body-container">
        <NavLeft markRegionsToMap={this.callMapFunc.bind(this)} />
        <Map todo={todo} {...actions} dataRegions={this.state.data} />
      </div>
    );
  }
};

export default BodyContent;
